<template>
<view class="container">
	<!-- Tab -->
	<view class="tab-view">
		<view class="tab-view-item"
			:id="0"
			:data-current="0"
			:class="{ 'active': active == 'all' }"
			@click="onTabClick('all')">
			<text class="tab-view-item--text">全部</text>
		</view>
		<view class="tab-view-item"
			:id="1"
			:data-current="1"
			:class="{ 'active': active == 'newest' }"
			@click="onTabClick('newest')">
			<text class="tab-view-item--text">最新</text>
		</view>
		<view class="tab-view-item"
			:id="2"
			:data-current="2"
			:class="{ 'active': active == 'most' }"
			@click="onTabClick('most')">
			<text class="tab-view-item--text">同问最多</text>
		</view>
		<view class="tab-view-item" style="flex: 1 0 112rpx;">
			<view @click="onSwitch">
				<text class="tab-view-item--text">只看老师回复</text>
				<switch color="#EEEEEE"
					style="transform:scale(.6)"
					:checked="checked"/>
			</view>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box detail-white"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 全部 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="list-card padding sec-top">
					<image class="list-card-cover border-radius"
						src="/static/v2_qb8b4c.png"
						mode="aspectFill"
						@click="onItemClick('profile', { id: 1 })" />
					<view class="list-card-content sec-left"
						@click="onItemClick('detail', { id: 1 })">
						<view class="list-card-header">
							<view class="list-card-title">你可以叫小王吗？</view>
							<view class="list-card-time">2020-11-11 20:11:22</view>
						</view>
						<view class="list-card-body">
							Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
						</view>
						<view class="list-card-footer">
							<view class="list-action-item"
								@click.stop="onItemClick('forward', { id: 1 })">
								<text class="iconfont icon-forward"></text>
								<text class="sec-left">1</text>
							</view>
							<view class="list-action-item"
								@click.stop="onItemClick('comment', { id: 1 })">
								<text class="iconfont icon-comment"></text>
								<text class="sec-left">1</text>
							</view>
							<view class="list-action-item"
								@click.stop="onItemClick('collect', { id: 1 })">
								<text class="iconfont icon-collect"></text>
								<text class="sec-left">1</text>
							</view>
							<view class="list-action-item"
								@click.stop="onItemClick('help', { id: 1 })">
								<text class="iconfont icon-help"></text>
								<text class="sec-left">1</text>
							</view>
						</view>
						<view class="list-card-slot">
							<view class="list-slot-item">
								<text class="list-slot-name">小王</text>:
								<text class="sec-left">如何做好一个Hybird App？</text>
							</view>
							<view class="list-slot-item">
								<text class="list-slot-name">老师</text>
								<text class="sec-left">回复</text>
								<text class="list-slot-name sec-left">小王</text>:
								<text class="sec-left">Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。</text>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 最新 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="list-card padding sec-top">
					<image class="list-card-cover border-radius"
						src="/static/v2_qb8b4c.png"
						mode="aspectFill"
						@click="onItemClick('profile', { id: 1 })" />
					<view class="list-card-content sec-left"
						@click="onItemClick('detail', { id: 1 })">
						<view class="list-card-header">
							<view class="list-card-title">你可以叫小王吗？</view>
							<view class="list-card-time">2020-11-11 20:11:22</view>
						</view>
						<view class="list-card-body">
							Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
						</view>
						<view class="list-card-footer">
							<view class="list-action-item"
								@click.stop="onItemClick('forward', { id: 1 })">
								<text class="iconfont icon-forward"></text>
								<text class="sec-left">1</text>
							</view>
							<view class="list-action-item"
								@click.stop="onItemClick('comment', { id: 1 })">
								<text class="iconfont icon-comment"></text>
								<text class="sec-left">1</text>
							</view>
							<view class="list-action-item"
								@click.stop="onItemClick('collect', { id: 1 })">
								<text class="iconfont icon-collect"></text>
								<text class="sec-left">1</text>
							</view>
							<view class="list-action-item"
								@click.stop="onItemClick('help', { id: 1 })">
								<text class="iconfont icon-help"></text>
								<text class="sec-left">1</text>
							</view>
						</view>
						<view class="list-card-slot">
							<view class="list-slot-item">
								<text class="list-slot-name">小王</text>:
								<text class="sec-left">如何做好一个Hybird App？</text>
							</view>
							<view class="list-slot-item">
								<text class="list-slot-name">老师</text>
								<text class="sec-left">回复</text>
								<text class="list-slot-name sec-left">小王</text>:
								<text class="sec-left">Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。</text>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 同问最多 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<!-- #ifdef APP-PLUS -->
				<cell>
				<!-- #endif -->
				<view class="list-card padding sec-top">
					<image class="list-card-cover border-radius"
						src="/static/v2_qb8b4c.png"
						mode="aspectFill"
						@click="onItemClick('profile', { id: 1 })" />
					<view class="list-card-content sec-left"
						@click="onItemClick('detail', { id: 1 })">
						<view class="list-card-header">
							<view class="list-card-title">你可以叫小王吗？</view>
							<view class="list-card-time">2020-11-11 20:11:22</view>
						</view>
						<view class="list-card-body">
							Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
						</view>
						<view class="list-card-footer">
							<view class="list-action-item"
								@click.stop="onItemClick('forward', { id: 1 })">
								<text class="iconfont icon-forward"></text>
								<text class="sec-left">1</text>
							</view>
							<view class="list-action-item"
								@click.stop="onItemClick('comment', { id: 1 })">
								<text class="iconfont icon-comment"></text>
								<text class="sec-left">1</text>
							</view>
							<view class="list-action-item"
								@click.stop="onItemClick('collect', { id: 1 })">
								<text class="iconfont icon-collect"></text>
								<text class="sec-left">1</text>
							</view>
							<view class="list-action-item"
								@click.stop="onItemClick('help', { id: 1 })">
								<text class="iconfont icon-help"></text>
								<text class="sec-left">1</text>
							</view>
						</view>
						<view class="list-card-slot">
							<view class="list-slot-item">
								<text class="list-slot-name">小王</text>:
								<text class="sec-left">如何做好一个Hybird App？</text>
							</view>
							<view class="list-slot-item">
								<text class="list-slot-name">老师</text>
								<text class="sec-left">回复</text>
								<text class="list-slot-name sec-left">小王</text>:
								<text class="sec-left">Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。</text>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				</cell>
				<!-- #endif -->
			</uni-list>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
	</swiper>
	<!-- 底部操作 -->
	<view class="shim"></view>
	<view class="fixed-action bottom">
		<view class="fixed-action-item">
			<view class="btn btn-primary large"
				@click="onAction('text')">
				<text class="iconfont icon-images"></text>
				<text class="sec-left">发图文</text>
			</view>
		</view>
		<view class="fixed-action-item">
			<view class="btn btn-primary large"
				@click="onAction('text')">
				<text class="iconfont icon-write"></text>
				<text class="sec-left">发帖子</text>
			</view>
		</view>
		<view class="fixed-action-item">
			<view class="btn btn-primary large"
				@click="onAction('video')">
				<text class="iconfont icon-video"></text>
				<text class="sec-left">小视频</text>
			</view>
		</view>
	</view>
	<!-- 发图文	 -->
	<uni-popup id="popup" ref="popup" type="bottom" :animation="true">
		<view class="publish-pop">
			<view class="publish-header">
				<text class="iconfont icon-close" @click="onClose"></text>
				<text class="publish-text" @click="onPublish">发布</text>
			</view>
			<view class="publish-body">
				<textarea class="publish-textarea"
					v-model="content"
					:maxlength="-1"
					:focus="true"
					placeholder="请输入解答内容" />
			</view>
			<view class="publish-image-area">
				<uni-grid :column="3"
					:showBorder="false">
					<block>
						<uni-grid-item class="publish-image-item">
							<view class="border-dashed"
								@click="onUpload">
								<uni-icons size="48" type="plusempty" color="#cccccc" />
							</view>
						</uni-grid-item>
					</block>
				</uni-grid>
			</view>
		</view>
	</uni-popup>
</view>
</template>

<script>
import { postNewNote } from '@/api/index.js';
export default {
	data() {
		return {
			active: 'all',
			tabIndex: 0,
			tabs: ['all', 'newest', 'most'],
			checked: false,
			id: null,
			content: null
		}
	},
	onLoad(data) {
		this.id = data.id;
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	},
	methods: {
		onUpload() {
			uni.chooseImage({
				count: 9,
				success: (res) => {
					console.log('res: ', res);
				},
				fail: (err) => {
					
				},
				complete: (res) => {
					
				}
			});
		},
		onPublish() {
			postNewNote(this.id, {
				lessonId: this.id,
				content: this.content
			}).then(res => {
				this.onClose();
			})
		},
		onClose() {
			this.$refs.popup.close();
		},
		onItemClick(type, item) {
			switch(type) {
				case 'profile':
					uni.navigateTo({
						url: `/pages/${ type }/${ type }?id=${ item.id }&from=faq`
					});
					break;
				case 'forward':
					break;
				case 'comment':
					break;
				case 'collect':
					break;
				case 'help':
					break;
				default:
					uni.navigateTo({
						url: `/pages/faq/${ type }?id=${ item.id }&from=faq`
					});
					break;
			}
		},
		onAction(action) {
			switch(action) {
				case 'video':
					uni.chooseVideo({
						camera: 'back',
						success: (res) => {
							
						},
						fail: (err) => {
							
						},
						complete: (res) => {
							
						}
					});
					break;
				default:
					this.$refs.popup.open();
					break;
			}
		},
		onSwitch() {
			this.checked = !this.checked;
		},
		onTabClick(type) {
			this.active = type
			switch(type) {
				case 'newest':
					this.tabIndex = 1;
					break;
				case 'most':
					this.tabIndex = 2;
					break;
				default:
					this.tabIndex = 0;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this.tabs[index];
		}
	}
}
</script>
